<template>
    <Box class="epidemic-point-detail-wrapper" title="防疫检查点详情" direction="row" >

        <!-- 防疫点点位摄像头 -->
        <Panel class="block-item block-video" second title="摄像头" align="center">
            <Switch render-type="video"></Switch>
        </Panel>

        <!-- 防疫点点位信息详情 -->
        <Panel class="block-item" second title="沛县湖西农场防疫点">
            <div class="point-detail-list">
                <div class="row" v-for="item in detailFields" :key="item.key">
                    <span> {{ item.text }}: </span>
                    <span> {{ state.pointDetail ? state.pointDetail[item.key] : null }} </span>
                </div>
            </div>
        </Panel>

        <!-- 列表部分 -->
        <Panel class="block-item" second title="防疫点列表">
            <div class="point-list scroll-hover">
                <div class="row"
v-for='item in state.pointList'
:key='item.epidemicId'
                    @click="handleRow(item.epidemicId)">
                    <span> {{ item.epidemicName }} </span>
                </div>
            </div>
        </Panel>
    </Box>
</template>
<script>
export default {
    name: 'EpidemicPointDetail'
}
/**
 * @desc  防疫检查数量详情 (2级)
 * @auther 邓清波
 * @date  2022/10/24
 * **/
</script>

<script setup>

import Switch from '../../components/detail/Switch.vue'
import { reactive, onMounted, getCurrentInstance } from 'vue'
import Panel from '../../components/panel'
import Box from '../../components/detail/Box.vue';
import epidemicApi from '../../api/epidemic';

const state = reactive({
    pointList: [],
    pointDetail: null
});
const detailFields = [{
    text: '所在位置',
    key: 'location'
}, {
    text: '管理单位',
    key: 'unit'
}, {
    text: '负责人员',
    key: 'principal'
}, {
    text: '联系电话',
    key: 'phone'
}]

onMounted(() => init())
/**
 * 组件初始化
 **/
function init() { getData() }

/**
 * 获取防疫点详情
 **/
function getData() {
    const params = {
        province: 32,
        city: '',
        roadType: '2',
        page: 1,
        limit: 999
    }
    epidemicApi.getEpidemicPointList(params).then(res => {
        console.log('获取防疫点列表', res);
        state.pointList = res.data.list || [];
        if (!state.pointDetail && state.pointList.length) {
            handleRow(state.pointList[0].epidemicId)
        }
    })
}

/**
 * 行点击事件
 * **/
function handleRow(id) {
    epidemicApi.getEpidemicPointDetail(id).then((res) => {
        console.log('获取防疫点详情', res)
        state.pointDetail = res.data
    })
}

</script>
<style  lang="less" scope>
/deep/ .mz-panel-content-main {
    align-items: baseline;
}

.epidemic-point-detail-wrapper {
    display: flex;

    .block-item {
        flex: 1;
        display: flex;
        flex-direction: column;
        height: 100%;

        .title {
            font-size: 14px;
            line-height: 52px;
            color: #333333;
        }

        .row {
            font-size: 12px;
            color: #666;
            line-height: 28px;
            height: 28px;
            border-bottom: 1px dashed #cdd5e0;
        }

        .row:nth-child(1) {
            border-top: 1px dashed #cdd5e0;
        }

        .point-list {
            flex: 1;

            .row:nth-child(odd) {
                background-color: #d6ebfc;
            }
            .row{
                padding-left: 10px;
                cursor: pointer;
            }
        }

    }

    .block-video {
        width: 280px;
        flex: none;

    }

    .point-detail-list,
    .point-list {
        margin: 10px 0;

    }

}
</style>
